<script setup lang="ts">
import { ref, watch } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
const props = withDefaults(
  defineProps<{
    params: any;
    api: (params: any) => Promise<any>;
  }>(),
  {}
);

const users = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);

const fetchData = async () => {
  loading.value = true;
  const res = await props.api({
    ...props.params,
    page: currentPage.value,
    limit: pageSize.value,
  });

  users.value = res.data.items;
  total.value = res.data.total;
  loading.value = false;
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchData();
};
watch(
  () => props.params,
  () => {
    fetchData();
  },
  { immediate: true }
);
defineExpose({
  fetchData,
});
</script>
<template>
  <el-table v-loading="loading" :data="users" style="width: 100%">
    <slot name="columns"></slot>
  </el-table>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<style lang="scss" scoped>
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
